@import './common';

* {
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}


.container-fluid {
  padding: 0 !important;
  max-width: 100vw;
  overflow: hidden;
}

// 手机rem响应式

$defaultSize: 37.5px !default;

@function rem($px) {
  @return $px / $defaultSize * 1rem;
}

// html {
//     font-size: 10vw;
//     font-family: "微软雅黑";
// }

$colors: ("white": #fff,
  "f1f": #F1F1F1,
  "f2f": #F2F2F2,
  "f7f": #F7F7F7,
  "fef": #FEFEFE,
  "ccc": #CCCCCC,
  "999": #999,
  "333": #333,
  "212": #212121,
  "yellow": #FFC107,
  "blue": #004B97,
);

@each $colorKey,
$color in $colors {
  .color-#{$colorKey} {
    color: $color;
  }
}

ul li {
  list-style: none;
}

.flex-1 {
  flex: 1;
}

.f-wrap {
  flex-wrap: wrap;
}

$flex-jc: (start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around);

$flex-ai: (start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch);

@each $jcKey,
$jc in $flex-jc {
  .j-#{$jcKey} {
    justify-content: $jc;
  }
}

@each $aiKey,
$ai in $flex-ai {
  .a-#{$aiKey} {
    align-items: $ai;
  }
}

.text-center {
  text-align: center;
}

$spacing-types: (m: margin,
  p: padding);

$spacing-directions: (t: top,
  r: right,
  b: bottom,
  l: left);

$spacing-sizes: (0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3,
);

$spacing-base-size: 1rem;

@each $typeKey,
$type in $spacing-types {

  @each $directionsKey,
  $directions in $spacing-directions {

    @each $sizeKey,
    $size in $spacing-sizes {
      .#{$typeKey}#{$directionsKey}-#{$sizeKey} {
        #{$type}-#{$directions}: $size * $spacing-base-size
      }
    }
  }
}

$font-sizes: ("12": 12,
  "14": 14,
  "16": 16,
  "18": 18,
  "22": 22,
  "24": 24,
  "30": 30,
  "34": 34,
  "36": 36,
  "38": 38,
  "48": 48,
);

@each $key,
$val in $font-sizes {
  .fs-#{$key} {
    font-size: $val * 1px;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 16px;
  }

  @each $key,
  $val in $font-sizes {
    .fs-#{$key} {
      font-size: $val / 32 * 1rem;
    }
  }

  @each $typeKey,
  $type in $spacing-types {

    @each $directionsKey,
    $directions in $spacing-directions {

      @each $sizeKey,
      $size in $spacing-sizes {
        .#{$typeKey}#{$directionsKey}-#{$sizeKey} {
          #{$type}-#{$directions}: $size * 0.625 * $spacing-base-size !important;
        }
      }
    }
  }
}

.more {
  &:hover {
    color: #fff;
  }

  &:active {
    color: #fff;
  }
}


// PC样式
.nav-box {
  background-color: map-get($colors, "f1f");

  ul li {
    padding: 0 20px;
    border-right: 1px solid #999;

    &:hover {
      cursor: pointer;
      color: map-get($colors, "yellow");
    }

    span {
      color: #999999;
      &:hover {
        color: map-get($colors, "yellow");
      }
    }

    a {
      &:hover {
        color: map-get($colors, "yellow");
      }

      &:link {
        color: #999;
      }

      &:visited {
        color: #999;
      }
    }

    &:first-child {
      border-left: 1px solid #999;
    }
  }
}

.swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.swiper-pagination-bullet {
  background-color: #004b97 !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  width: 15px !important;
  background-color: #f78e00 !important;
}

.title-box {
  background: map-get($colors, "blue");

  input {
    width: 300px;
    height: 36px;
    font-size: 16px;
    padding-left: 10px;
  }
}

.footer-box {
  background: map-get($colors, "333");

  .foot-left {
    img {
      width: 46px;
    }
  }

  ul li {
    cursor: pointer;
  }

  hr {
    border: none;
    height: 1px;
    background-color: #707070;
    margin-bottom: 24px;
  }

  .foot-middle {
    padding-left: 40px;
  }
}

.line-box {
  span {
    display: block;
    width: 40px;
    height: 2px;

    &:first-child {
      background: map-get($colors, "blue");
    }

    &:last-child {
      background: map-get($colors, "yellow");
    }
  }
}

.explain {
  .fs-14 {
    line-height: 30px;
  }
}

.more {
  border-radius: 100px;
  background: map-get($colors, "blue");
  padding: 8px 20px;
  cursor: pointer;
}

.major-box {
  position: relative;

  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: default;
  }
}

.teacher-box {
  .col-md-10 {
    align-items: stretch;
    background: #fff;
    margin: 0 auto;
    margin-top: -20px;

    &:nth-child(even) {
      border-bottom: 5px solid map-get($colors, "yellow");
    }
  }

  & :nth-child(odd) {
    .col-md-10 {
      border-bottom: 5px solid map-get($colors, "blue");
    }
  }

  .fs-14 {
    height: 40px;
  }

  // img {
  //   height: 310px;
  // }
}

.swiper-container-two {
  position: relative;

  img {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
  }

  .swiper-button-next {
    color: map-get($colors, "blue");
    --swiper-navigation-size: 28px;
    /* 设置按钮大小 */
    margin-right: 5%;
  }

  .swiper-button-prev {
    color: map-get($colors, "blue");
    --swiper-navigation-size: 28px;
    /* 设置按钮大小 */
    margin-left: 5%;
  }
}

.type-box {
  a {
    &:hover {
      color: #ccc;
    }

    &:link {
      color: #ccc;
    }
  }
}

// 手机样式
@media screen and (max-width: 768px) {
  .navbar img {
    width: 1.375rem;
  }

  .swiper-pagination-bullet {
    width: 0.125rem !important;
    height: 0.125rem !important;
  }

  .swiper-pagination-bullet-active {
    width: 0.1875rem !important;
    background-color: #f78e00 !important;
  }

  .swiper-pagination-bullets {
    bottom: 0 !important;
  }

  .phone-foot {
    background: #333;
  }

  .right-nav {
    background: #fff;
    width: 17.375rem;
    height: 100vh;
    position: fixed;
    z-index: 999;
    top: 0;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    right: -17.375rem;

    li {
      border-bottom: 1px solid #999;
    }
  }

  .show-menu {
    right: 0;
    transition: all 0.4s;
  }
}

.phone-type {
  a {
    &:active {
      color: #fff;
    }

    &:link {
      color: #fff;
    }
  }
}